<template>
<div>
    <Row type="flex" class="margin-top-10">
        <Col span="6">
        <Card style="height: 100%">
        <Row type="flex" class="margin-top-10" justify="center">
            <Col span="5">
            <P class="labelcss">会计期间：</P>
            </Col>
            <Col span="6">
            <Select v-model="acctyear">
                    <Option v-for="item in acctyears" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
            <Col span="2">
            <P class="labelcss">年</p>
            </Col>
            <Col span="6">
            <Select v-model="acctperiod">
                    <Option v-for="item in acctperiods" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </Col>
            <Col span="2">
            <P class="labelcss">期</p>
            </Col>
        </Row>
        <Row type="flex" class="margin-top-10" justify="center">
            <Col span="20">
            <Input v-model="modelInput" type="text" icon="search"></Input>
            </Col>
            <Col span="20">
            <Tree :data="org"></Tree>
            </Col>
        </Row>
        </Card>
        </Col>
        <Col span="18">
        <Card style="height: 100%">
        <Row type="flex" class="margin-top-10" >
            <Col span="2">
            <P class="labelcss">对方单位：</p>
            </Col>
            <Col span="3">
            <Select v-model="modelSelect">
          <Option v-for="item in selectItems" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
            </Col>
            <Col span="2">
            <P class="labelcss">资产编号：</p>
            </Col>
            <Col span="3">
            <Input v-model="modelInput" type="text">
            </Input>
            </Col>
            <Col span="2">
            <P class="labelcss">资产名称：</p>
            </Col>
            <Col span="3">
            <Input v-model="modelInput" type="text">
            </Input>
            </Col>
            <Col span="2">
            <P class="labelcss">资产分类：</p>
            </Col>
            <Col span="3">
            <Select v-model="modelSelect">
          <Option v-for="item in selectItems" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
            </Col>
            <Col span="4" style="text-align:right">
            <Button type="ghost">查询</Button>
            <Button type="ghost">重置</Button>
            </Col>
        </Row>
        <Row type="flex" class="margin-top-10">
            <Col span="24">
            <Button type="ghost" @click="model1 = true">新建</Button>
            <Button type="ghost">批量录入</Button>
            <Button type="ghost">删除</Button>
            <Button type="ghost">列选</Button>
            <Button type="ghost">审核</Button>
            <Button type="ghost">销核</Button>
            <Button type="ghost">导出</Button>
            </Col>
        </Row>
        <Row type="flex" class="margin-top-10">
            <Col span="24">
            <Table border :columns="columns" :data="data"></Table>
            </Col>
        </Row>
        <Row type="flex" class="margin-top-10">
            <Col span="24" style="text-align:right">
            <Page show-elevator total="100"></Page>
            </Col>
        </Row>
        </Card>
        <Modal v-model="model1" title="资产台账" :mask-closable="false">           
            <Add></Add>
        </Modal>
        </Col>
    </Row>
</div>
</template>
<script>
import AddPage from './add.vue';
import ExampleData from '@/views/data.js'
export default {
    components: {
        'Add': AddPage
    },
    data() {
        return {
            org : ExampleData.org,
            data : ExampleData.assetAccListDate,
            model1: false,
            "acctyear": "",
            "acctperiod": "",
            "acctyears": [{
                "label": "2016",
                "value": "1"
            }, {
                "label": "2017",
                "value": "2"
            }, {
                "label": "2018",
                "value": "3"
            }],
            "modelInput": "",
            "acctperiods": [{
                "label": "1",
                "value": "1"
            }, {
                "label": "2",
                "value": "2"
            }, {
                "label": "3",
                "value": "3"
            }],
            columns: [{
                    type: 'selection',
                    width: 60,
                    align: 'center',
                    fixed: 'left',
                    width: 200,
                },
                {
                    type: 'index',
                    title: '序号',
                    align: 'center',
                    fixed: 'left',
                    width: 200,
                },
                {
                    title: '对方单位',
                    key: 'age',
                    width: 200,
                },
                {
                    title: '资产编号',
                    key: 'province',
                    width: 200,
                },
                {
                    title: '资产名称',
                    key: 'city',
                    width: 200,
                },
                {
                    title: '入账时间',
                    key: 'address',
                    width: 200,
                },
                {
                    title: '科目',
                    key: 'zip',
                    width: 200,
                },
                {
                    title: '采购金额',
                    key: 'price',
                    width: 200,
                },
                {
                    title: '核对状态',
                    key: 'order',
                    width: 200,
                },
                {
                    title: 'Action',
                    key: 'action',
                    fixed: 'right',
                    width: 120,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                }
                            }, 'Edit'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                }
                            }, 'Del')
                        ]);
                    }
                }
            ],
        }
    }
}
</script>
<style>
@import '../../styles/common.less';
p {
    text-align: center;
    line-height: 30px;
}
</style>